<template>
	<view class="goodproduct">
		<view class="goodproduct-ul">
			<view class="goodproduct-flex">
				<view class="goodproduct-center-ul" v-for="(item,index) in merchant" @click="goodproduct(item)">
					<view class="goodproduct-flex-li">
						<text>{{item.if}}</text>
						<image :src=" '/static/image/' + item.image + '.png' " mode=""></image>
					</view>
					<view class="goodproduct-flex-lo">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchant: [{
						id: 1,
						image: 'banner',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 2,
						image: '',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 3,
						image: 'banner',
						if: "空位招租",
						name: "汾酒"
					},
					{
						id: 4,
						image: '空位招租',
						if: "55",
						name: "汾酒"
					},
					{
						id: 5,
						image: '',
						if: "空位招租",
						name: "汾酒"
					},
				]
			}
		},
		methods:{
			goodproduct(val) {
				let url;
				switch (val.id) {
					case 1:
						url = '/pages/public/productname';
						break;
					case 2:
						url = '/';
						break;
				}
				uni.navigateTo({
					url: url,
				});
			},
			potse(){
				uni.navigateTo({
					url:'/pages/index/goodproduct'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.goodproduct {
		margin: 5rpx 30rpx;

		.goodproduct-ul {
			width: 700rpx;
			margin: 0 auto;
			.goodproduct-flex {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.goodproduct-center-ul {
					margin-left: 15rpx;
					margin-top: 20rpx;

					.goodproduct-flex-li {
						width: 328rpx;
						height: 400rpx;
						background-color: #DDDDDD;
						border-radius: 13px;
						text-align: center;
						line-height: 400rpx;
						position: relative;

						text {
							width: 328rpx;
							font-size: 32rpx;
							font-family: zcoolwenyiti;
							font-weight: 400;
							color: #333333;
							position: absolute;
						}

						image {
							width: 328rpx;
							height: 400rpx;
						}
					}

					.goodproduct-flex-lo {
						text-align: center;
						margin-top: 20rpx;

						text {
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}
					}

				}
			}
		}
	}
</style>
